<template>
    <div>
      <a-modal v-model:visible="visible" :width="700">
        <template #title>
          <h3>历史数据</h3>
        </template>
        <template #footer>
          <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
          <a-button key="submit" type="primary" @click="handleOkClick" class="sub-btn">确定</a-button>
        </template>
          <!-- <div class="main"> -->
              <a-row class="top-title">
                  <a-col :span="6"><h4>编号：{{ props.selectRecord1.id }}</h4></a-col>
                  <a-col :span="8"><h4>规格型号：{{ props.selectRecord1.specification }}</h4></a-col>
                  <a-col :span="8"><h4>保管人：{{ props.selectRecord1.keeper }}</h4></a-col>
              </a-row>
              <a-table :columns="columns" :data-source="data" class="table">
                  <template #bodyCell="{ column, text }">
                      <template v-if="column.dataIndex === 'name'">
                          <a>{{ text }}</a>
                      </template>
                  </template>
              </a-table>
          <!-- </div> -->
      </a-modal>
  </div>
  </template>
  
  <script setup>
  import { ref,watchEffect,onMounted } from 'vue';
  // 
  const visible = ref(false);
  const columns = [ {
    title: '规格型号',
    dataIndex: 'specification',
    key: 'specification',
    align:'center'
  }, {
    title: '保管人',
    dataIndex: 'keeper',
    key: 'test ',
    align:'center'
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align:'center'
  }];
  const data = ref([])
  const props = defineProps(['selectRecord1','historyData'])

const showModal = () => {
    visible.value = true;
};
watchEffect(() => {
  data.value = props.historyData
})
data
 //取消按钮
 const handleCancelClick = () => {
  visible.value = false;
}
//确定按钮
const handleOkClick = () => {
  visible.value = false;
} 
    
defineExpose({
    showModal,
})

</script>
<style lang="less" scoped>
h3{
      display: inline-block;
      font-weight: 700;
    }
.top-title{
      padding-left: 10px;
}
.table{
    padding-top: 20px;
}
.sub-btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
  .btn{
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: #292929;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
</style>